<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>英雄</title>
  <link rel="stylesheet" href="./css/hero.css" />
  <link rel="stylesheet" href="./css/comm-v1.css" />
</head>

<body>
  <div class="herolist-box">
    <div class="clearfix herolist-types">
      <ul class="types-left">
        <li>综合</li>
        <li>定位</li>
      </ul>
      <ul class="clearfix types-ms">
        <li data-ptype="10">
          <span class="ms-radio"><i class="i"></i></span>
          <label>本周免费</label>
        </li>
        <li data-ptype="11">
          <span class="ms-radio"><i class="i"></i></span>
          <label>新手推荐</label>
        </li>
      </ul>
      <ul class="clearfix types-ms">
        <li class="current" data-type="0">
          <span class="ms-radio"><i class="i"></i></span>
          <label>全部</label>
        </li>
        <li data-type="3">
          <span class="ms-radio"><i class="i"></i></span>
          <label>坦克</label>
        </li>
        <li data-type="1">
          <span class="ms-radio"><i class="i"></i></span>
          <label>战士</label>
        </li>
        <li data-type="4">
          <span class="ms-radio"><i class="i"></i></span>
          <label>刺客</label>
        </li>
        <li data-type="2">
          <span class="ms-radio"><i class="i"></i></span>
          <label>法师</label>
        </li>
        <li data-type="5">
          <span class="ms-radio"><i class="i"></i></span>
          <label>射手</label>
        </li>
        <li data-type="6">
          <span class="ms-radio"><i class="i"></i></span>
          <label>辅助</label>
        </li>
      </ul>
    </div>
    <div class="herolist-content">
      <ul class="herolist clearfix">
        <!-- <li >
          <a href="#" target="_blank"><img src="" width="91" height="91" alt="曜" />曜</a>
        </li> -->
      </ul>
    </div>
  </div>

  <!-- 数组比较多，放在了外接的js文件中 -->
  <script src="./hero.js"></script>
  <!-- <script>
    // 1. 渲染函数 render 渲染（render）是将数据或代码转换成可视化输出的过程。
    //在前端开发中，渲染通常指将数据转换为页面上的 HTML、CSS 和 JavaScript 输出，
    //以便用户可以看到和交互页面。
    function render(arr) {
      const strArr = arr.map(ele => {
        
        const { icon, name } = ele//解构ele对象获取两个变量 ；
        // 解构对象：用于从对象中提取出属性值并赋值给变量
        return `
        <li >
          <a href="#" target="_blank"><img src="${icon}" width="91" height="91" alt="${name}" />${name}</a>
        </li> 
        `
      })
      // 渲染
      document.querySelector('.herolist').innerHTML = strArr.join('')
    }
    render(heroArr)

    // 2. 点击可以进行筛选 利用循环绑定多个事件（注意这里li里面包含多个元素，事件委托比较麻烦）
    const lis = document.querySelectorAll('.types-ms>li')
    lis.forEach(ele => {
      // 循环绑定事件
      ele.addEventListener('click', function () {
        // 排他思想，当前高亮
        document.querySelector('li.current').classList.remove('current')
        this.classList.add('current')

        // 筛选页面
        // 初始值为总数组
        const arr = heroArr
        // console.log(this.dataset.ptype)  得到当前元素的自定义属性值
        // 点击时候，利用当前自定属性值到数组里面筛选符合条件的
        arr = heroArr.filter(ele => ele.pay_type === +this.dataset.ptype || ele.hero_type === +this.dataset.type)
        render(arr)
        /*+this.dataset.ptype 的作用是将当前 HTML 元素的 data-ptype 
        属性值转换为数值类型。+ 是一元运算符，用于将后面的值转换为数值类型。
        当应用于一个字符串时，它会尝试将该字符串解析为数值，并返回解析后的结果。
        如果无法解析，则返回 NaN（Not a Number）。*/
      })
    })

  </script> -->
  <script>
    function render(arr) {//封装函数，方便调用
      /*渲染函数 render 渲染（render）是将数据或代码转换成可视化输出的过程。
    在前端开发中，渲染通常指将数据转换为页面上的 HTML、CSS 和 JavaScript 输出，
    以便用户可以看到和交互页面。*/
      const strArr=arr.map(ele=>{//用数组map方法映射返回新数组
        const {icon,name}=ele
        //将变量 ele 中的属性 icon：图片 和 name：图片名字 分别解构出来并赋值给了同名的常量 icon 和 name
        return`
        <li >
          <a href="#" target="_blank"><img src="${icon}" width="91" height="91" alt="${name}" />${name}</a>
        </li>
        `
      })

      document.querySelector('.herolist').innerHTML=strArr.join('')
      /*获取文档中 class 为 herolist 的 HTML 元素对象设置它的文本内容，
      .join() 方法将该数组中的所有字符串连接成一个字符串，并返回该字符串*/
    }
    render(heroArr)

    const lis = document.querySelectorAll('.types-ms>li')//获取元素对象
    lis.forEach(ele=>{//循环绑定事件
      ele.addEventListener('click',function () {
        document.querySelector('li.current').classList.remove('current')
        //在 classList.remove() 的参数中不应该包含点号
        this.classList.add('current')//用排他思想搞高亮效果
        
        let arr=heroArr//把初始值设置为全部,给arr声明不能用const
        arr = heroArr.filter(ele =>ele.pay_type=== +this.dataset.ptype ||ele.hero_type=== +this.dataset.type)
        
  /*+this.dataset.ptype 的作用是将当前 HTML 元素的 data-ptype 
        属性值转换为数值类型。+ 是一元运算符，用于将后面的值转换为数值类型。
        当应用于一个字符串时，它会尝试将该字符串解析为数值，并返回解析后的结果。
        如果无法解析，则返回 NaN（Not a Number）。*/
        render(arr)

      })
      

    })
    
  </script>
</body>

</html>